<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实战</title>



    <link rel="stylesheet" href="css/test.css" type="text/css" />
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>


    <div id="app">
        <!-- {{message}} -->
        <div :class='moercolor'>像个开关改动 app.has no</div>
        <div :class="[hascolor?'abc': '']">拓展</div>
        <div :class="[bgclolr,nums]">进阶</div>
        <div :class="{'abc':hascolor,'num':noclolr}">
            <h1>
                啦啦啦
            </h1>
        </div>

        <p v-if="age===18">今年18

        </p>
        <p v-else-if="age>18">成年人</p>

        <p v-else>小学生</p>



        <!-- Vue循环 -->

        <ul>

            <li v-for='(m,index) of message'>{{index+1}}*{{m.meg}}-{{m.time}}
                <!-- app.message.push({meg:"ooo",time:"60"}) -->添加
            </li>
        </ul>
        <ul>
            <li v-for="u in user">{{u}}

            </li>
        </ul>
        <!-- 冒泡排序 -->
        <ul>
            <h6>排序</h6>
            <li v-for='(m,index) of timrsort'>{{index+1}}*{{m.meg}}-{{m.time}}
                <!-- app.message.push({meg:"ooo",time:"60"}) -->添加
            </li>
        </ul>
        <label style="color: aqua;">{{student}}</label>

    </div>



    <div id="app1">
        <!-- {{message1}} -->
        {{message1 | message2}}
        </br>
        {{newM}}

        </br>
        {{otherM()}}
        <div v-model="ht">
            <div v-html="ht">

            </div>
            <img v-bind:src="imgs" alt="" height="450px" width="600px">
            <a :href="url">123</a>
            <button v-on:click="but"> biu~ </button>

        </div>

        <label v-bind:title="message1" style="color: crimson;">
            鼠标悬停查看时间信息
        </label>
        </br>
        <!-- Vue判断 -->
        <label v-if="CanSee">我看到你了

        </label>
    </div>



    <script>
        var app1 = new Vue({
            el: "#app1",
            data:
            {
                message1: '页面加载时间于' + new Date().toLocaleString(),
                ht: "<h1>老李</h1>",
                imgs: "15175090689_1920x1200.jpg",
                url: "https://www.hao123.com/",
                CanSee: true
            },
            computed: {
                newM: function () {
                    return this.url + "计算属性"
                }
            },
            filters: {
                message2: function (info
                ) {
                    return info + "管道"
                }
            },
            // 方法
            methods: {
                otherM: function () {
                    return this.ht + "方法"
                },

                but: function () {
                    console.log("戳一戳!!!")
                }
            },
            created: function () {
                console.log("我出生了" + new Date().toLocaleTimeString());
            },
            mounted: function () {
                console.log("我没了" + new Date().toLocaleString());
            }



        })
    </script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                age: 18,
                message: [
                    { meg: "one", time: '1000' },
                    { meg: "two", time: '60' },
                    { meg: "three", time: '40' },
                    { meg: "four", time: '50' },
                    { me: "zero", time: '80' },

                ],
                user: {
                    uesrname: 'sa',
                    pwd: '123456',
                    tel: '135123112'

                },
                hascolor: true,
                noclolr: false,
                student: "giao",
                nums: 'num1',//很难更改

            },
            computed: {
                bgclolr: function () {
                    return this.hascolor ? 'abc' : ""
                },
                moercolor: function () {
                    return {
                        num1: this.hascolor,
                        num: this.noclolr
                    }
                },
                timrsort: function () {
                    return this.message.sort(function (a, b) {
                        return a.time - b.time 
                    })
                }
            }

        })
    </script>



</body>

</html>